<div class="op-sidebar">
    <ul class="nav nav-pills nav-stacked op-submenu" data-bind="foreach: leftMenu">
        <li data-bind="css: { active: isActive, 'op-opened': children.length > 0 }">
            <a data-bind="attr: { href: href }" class="clearfix">
                <div class="op-submenu-counter" data-bind="css: { invisible: !$data.hasCounters }">
                    <div class="op-counter-active" data-bind="text: $data.mainCount"></div>
                    <div class="op-counter-total" data-bind="visible: $data.estMasse, text: $data.secondaryCount"></div>
                </div>
                <div class="op-submenu-title" data-bind="text: title"></div>
            </a>
            <ul class="nav" data-bind="foreach: children, visible: children.length > 0">
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: href }">
                        <div class="op-submenu-counter" data-bind="css: { invisible: !$data.hasCounters }">
                            <div class="op-counter-active" data-bind="text: $data.mainCount"></div>
                            <div class="op-counter-total" data-bind="visible: $data.estMasse, text: $data.secondaryCount"></div>
                        </div>
                        <div class="op-submenu-title" data-bind="text: title"></div>
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>